<template>
  <el-card class="form-container" shadow="never">
    <el-form :model="sysUser" :rules="rules" ref="sysUserForm" label-width="150px">
      <el-form-item label="账号：" prop="username">
        <el-input v-model="sysUser.username" disabled></el-input>
      </el-form-item>
      <el-form-item label="密码：" prop="password">
        <el-input v-model="sysUser.password" type="password"></el-input>
      </el-form-item>
      <el-form-item label="昵称：" prop="nickname">
        <el-input v-model="sysUser.nickname"></el-input>
      </el-form-item>
      <el-form-item label="备注：" prop="remark">
        <el-input v-model="sysUser.remark"></el-input>
      </el-form-item>
      <el-form-item label="状态：" prop="status">
        <!--<el-input v-model="sysUser.status"></el-input>-->
        <el-switch
          v-model="sysUser.status"
          active-text="不锁定"
          inactive-text="锁定"
          :active-value="1"
          :inactive-value="0">
        </el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button v-if="!isEdit" @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import {getSysUserDetail, updateSysUser} from '@/api/sysUser'
const defaultSysUser = {
  username: '',
  password: '',
  nickname: '',
  remark: '',
  status: ''
}
export default {
  name: 'SysUserDetail',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      sysUser: Object.assign({}, defaultSysUser),
      rules: {
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 2, max: 100, message: '长度在 6 到 20 个字符之间', trigger: 'blur'}
        ]
      }
    }
  },
  created () {
    if (this.isEdit) {
      getSysUserDetail(this.$route.query.id).then(response => {
        this.sysUser = response.data
      })
    }
  },
  methods: {
    submitForm () {
      this.$refs.sysUserForm.validate(valid => {
        if (valid) {
          this.$confirm('是否提交数据', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if (this.isEdit) {
              updateSysUser(this.sysUser).then(response => {
                this.$message({
                  message: '修改成功',
                  type: 'success',
                  duration: 1000
                })
                this.$router.back()
              })
            }
          })
        } else {
          console.log('参数不合法！')
          return false
        }
      })
    },
    resetForm () {
      this.$refs.sysUserForm.resetFields()
      this.sysUser = Object.assign({}, defaultSysUser)
    }
  }
}
</script>

<style scoped>

</style>
